<template>
	<div>
		<div>
			<el-row>
				<el-col :span="12">
					<div class="grid-content"></div>
				</el-col>
				<el-col :span="12">
					<div>
						<el-input placeholder="请输入内容" v-model="inputfid" class="input-with-select">
							<el-select v-model="select" slot="prepend" placeholder="请选择">
								<el-option label="货运单编号" value="1"></el-option>
							</el-select>
							<el-button slot="append" icon="el-icon-search" @click="findByFid()"></el-button>
						</el-input>
					</div>
				</el-col>
			</el-row>
		</div>
		<div style="text-align: left;">
			<el-button type="danger" plain icon="el-icon-delete" @click="delMore()">批量删除</el-button>
		</div>
		<div style="margin-top: 5px;">
			<el-table :data="tabledata" border style="width: 100%" :cell-style="{'text-align':'center'}"
				:header-cell-style="{'text-align':'center'}" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column fixed prop="fid" label="货运编号" width="200">
				</el-table-column>
				<el-table-column prop="customerInformations.name" label="发货客户" width="120">
				</el-table-column>
				<el-table-column prop="onemoney" label="本单金额(元)" width="120">
				</el-table-column>
				<el-table-column prop="money" label="应收金额(元)" width="120">
				</el-table-column>
				<el-table-column prop="moneyed" label="已收金额(元)" width="120">
				</el-table-column>
				<el-table-column prop="freightContracts.fare" label="运费(元)" width="120">
				</el-table-column>
				<el-table-column prop="freightContracts.insurancefare" label="保险费(元)" width="120">
				</el-table-column>
				<el-table-column prop="freightContracts.freightLines.arrivetime" label="到货时间" width="200">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="150">
					<template slot-scope="scope">
						<el-button type="danger" plain size="small" @click="delhistroy(scope.$index, scope.row)">删除历史
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div>
			<el-pagination style="text-align: right;" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-sizes="[5,10]"
				:page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				inputfid: '',
				select: '',
				tabledata: [],
				//当前页
				currentPage: 1,
				//每页显示条数
				pageSize: 5,
				pageInfo: {},
				dialogFormVisible: false,
			}
		},
		methods: {

			handleSizeChange(val) {
				//console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getList();
			},
			handleCurrentChange(val) {
				//console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getList();
			},
			//多选的值存到数组
			handleSelectionChange(val) {

				this.multipleSelection = val;

			},
			//批量删除
			delMore() {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const length = this.multipleSelection.length;

					for (let i = 0; i < length; i++) {
						for (let j = 0; j < this.tabledata.length; j++) {
							if (this.multipleSelection[i] == this.tabledata[j]) {

								//删除后端数据
								this.axios.delete("http://localhost:8080/freightSettle/" + this.tabledata[j].id,
										"")
									.then((res) => {
										this.$message({
											type: 'success',
											message: '删除成功!'
										});
									})

								//删除前端页面
								this.tabledata.splice(j, 1);
								//刷新总条数
								this.getList();
							}
						}

					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//单删除
			delhistroy(index, row) {
				console.log(index, row);

				this.$confirm('此条记录将永久删除, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.axios.delete("http://localhost:8080/freightSettle/" + row.id).then(res => {
						if (res.data.code == 200) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						}
						this.getList();
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//分页查询
			getList() {
				//发送ajax
				this.axios.get("http://localhost:8080/freightSettle/" + this.currentPage + "/" + this.pageSize).then(
					res => {
						console.log(res.data.data);
						//this.pageInfo = res.data.data;
						let tData = [];
						let j = 0;
						for (let i = 0; i < res.data.data.list.length; i++) {
							if (res.data.data.list[i].isSettle == 1) {
								tData[j] = res.data.data.list[i]
								j++;
							}
						}

						this.tabledata = tData;
						this.pageInfo.total = tData.length;
					})
			},
			//搜索功能
			findByFid() {
				//发送ajax
				this.axios.get("http://localhost:8080/freightSettle/" + this.inputfid).then(
					res => {
						//console.log(res.data.data);
						this.tabledata = [];
						var re = [];
			
						if (res.data.data.isSettle == 1) {
							re.push(res.data.data);
							this.tabledata = re;
							this.$message({
								message: res.data.msg,
								type: 'success'
							});
							this.pageInfo.total = 1;
						}else{
							this.$message({
								message: '订单未结算',
								type: 'warning'
							});
							this.pageInfo.total = 0;
						}
						
						console.log(this.tabledata);
					})
			}
		},
	/* computed: {
		tableMaxHeight() {
			return window.innerHeight - 170 + 'px';
		}
	}, */
	//初始化数据
	created() {
		this.getList();
	}
	}
</script>

<style>
</style>
